<template>
    <div>
        <router-view name="page_header"></router-view>
        <div>
            <el-card class="box-card">
                <h2>{{ article.title }}</h2>
                <div>
                    <span>
                        <el-tag size="medium" class="el-icon-view">点击量:{{ article.hits
                        }}</el-tag>
                        <el-tag size="medium ">点赞数:{{ article.praise_len }}</el-tag>
                        <el-tag size="medium ">发布时间:{{ format(article.create_time).format }}</el-tag>
                        &emsp;&emsp;&emsp;
                        <el-button type="warning" icon="el-icon-thumb" circle
                            @click="praise(article.article_id, article.praise_len)">点赞</el-button>
                    </span>
                </div>
                <div>
                    <img :src="article.url" class="image">
                </div>
                <p>{{ article.content }}</p>
            </el-card>
        </div>
        <router-view name="page_foot"></router-view>
    </div>
</template>
<script>
import axios from 'axios';
import dateTime from '@/utils/date_time';
export default {
    data() {
        return {
            article: []
        }
    },
    created: function () {
        let that = this;
        //防止刷新时跳转到其它位置
        let id = that.$route.params.article_id;
        if (!that.$route.params.article_id) {
            id = window.localStorage.getItem("article_id");
        }
        axios.get('http://127.0.0.1:5000/api/article/get_obj', {
            params: {
                article_id: id,
            }
        })
            .then(function (response) {
                console.log(response.data.result.obj);
                that.article = response.data.result.obj;
                //保存到本地仓库
                window.localStorage.setItem("article_id", response.data.result.obj.article_id);
                if (window.localStorage.getItem("token")) {
                    //如果已登录，增加点击量
                    that.addHits(response.data.result.obj.article_id, response.data.result.obj.hits);
                }
            })
            .catch(function (error) {
                console.log(error);
            })
            .then(function () {
                // 总是会执行
            })
    },
    methods: {
        praise(id, praise_len) {
            let that = this;
            if (!window.localStorage.getItem("token")) {
                this.$message.error("未登录!点赞前请登录!");
                return;
            }
            axios({
                method: 'post',
                url: 'http://127.0.0.1:5000/api/article/set?article_id=' + id,
                data: {
                    praise_len: praise_len + 1,
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                    that.$message.success("已成功点赞!");
                    window.location.reload();
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行

                })
        },
        addHits(id, hits) {
            axios({
                method: 'post',
                url: 'http://127.0.0.1:5000/api/article/set?article_id=' + id,
                data: {
                    hits: hits + 1,
                },
                headers: {
                    'X-Auth-Token': window.localStorage.getItem("token")
                },
            })
                .then(function (response) {
                    console.log(response.data);
                })
                .catch(function (error) {
                    console.log(error);
                })
                .then(function () {
                    // 总是会执行
                })
        },
        format(create_time) {
            return dateTime.dateTime(create_time)
        }
    }
}
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    padding: 18px 0;
}
</style>
